<template>
  <div class="page-container">
    <Head></Head>
    <div class="user-info">
      <div class="avatar"></div>
      <div class="name" v-if="userInfo && userInfo.userInfo">{{userInfo.userInfo.username}}</div>
    </div>
    <div class="device">
      <div class="title">{{$t('设备管理')}}</div>
      <div class="total">
        <div class="t1">{{$t('设备总计')}}</div>
        <div class="t2">
          {{deviceCount.deviceCount}}<span>{{$t('个')}}</span>
        </div>
      </div>
      <div class="list">
        <div class="item">
          <div class="t2">
            {{deviceCount.onlineCount}}<span>{{$t('个')}}</span>
          </div>
          <div class="t1">{{$t('在线')}}<i></i></div>
        </div>
        <div class="item off">
          <div class="t2">
            {{deviceCount.offlineCount}}<span>{{$t('个')}}</span>
          </div>
          <div class="t1">{{$t('离线')}}<i></i></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Head from './head'
  import {mapGetters} from 'vuex';
  import * as api from "@/api";
  export default {
    name: "index",
    components: {
      Head
    },
    computed: {
      ...mapGetters({
        userInfo: 'system/userInfo', // 映射 allDictionaries 到 dicts
      }),
    },
    data() {
      return {
        deviceCount: {
          deviceCount: 0,
          offlineCount: 0,
          onlineCount: 0,
        },
      }
    },
    methods: {
      async deviceStatusStatistics() {
        try {
          const {data} = await api.deviceStatusStatistics();
          if (!data.code) {
            this.deviceCount = data.data
          }
        } catch (e) {
          console.log(e)
        }
      },
    },
    mounted() {
      this.deviceStatusStatistics();
    }
  }
</script>

<style scoped lang="scss">
  .page-container{
    width: 100%;
    padding: 0 16px;
    height: 100%;
    padding-bottom: 80px;
    box-sizing: border-box;

    .user-info{
      width: 100%;
      height: 66px;
      display: flex;
      align-items: center;
      margin-bottom: 16px;
      .avatar{
        width: 66px;
        height: 66px;
        background: #D9D9D9;
        border-radius: 50%;
      }
      .name{
        font-weight: 500;
        font-size: 16px;
        color: #FFFFFF;
        margin-left: 13px;
      }
    }
    .device{
      width: 100%;
      box-sizing: border-box;
      padding: 16px;
      background: #181818;
      border-radius: 16px 16px 16px 16px;
      .title{
        font-weight: 500;
        font-size: 14px;
        color: #FFFFFF;
      }
      .total{
        margin-top: 12px;
        width: 100%;
        .t1{
          width: 100%;
          text-align: center;
          font-weight: 500;
          font-size: 14px;
          color: #FFFFFF;
        }
        .t2{
          width: 100%;
          text-align: center;
          font-weight: 500;
          font-size: 26px;
          color: $color;
          margin-top: 8px;
          span{
            font-size: 12px;
            font-weight: 400;
          }
        }
      }
      .list{
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-top: 16px;
        .item{
          .t2{
            width: 100%;
            text-align: center;
            font-weight: 500;
            font-size: 20px;
            color: #fff;
            margin-bottom: 8px;
            span{
              font-size: 12px;
              font-weight: 400;
            }
          }
          .t1{
            width: 100%;
            text-align: center;
            font-weight: 500;
            font-size: 14px;
            color: #FFFFFF;
            position: relative;
            i{
              position: absolute;
              top: -4px;
              right: 0px;
              display: block;
              width: 8px;
              height: 8px;
              border-radius: 50%;
              background: #FE5454;
            }
          }
        }
        .off{
          .t2{
            font-weight: 400;
            color: #D8D8D8;
          }
          .t1{
            font-weight: 400;
            color: #D8D8D8;
            i{
              background: #A6A6A6;
            }
          }
        }
      }
    }
  }
</style>
